<?php
/*
 * template/index.phtml
 * 
 */
?>

<?php
$title = "Planning Type";
$this->headTitle($title);

// Variables
$site	 = $this->site;
$sites	 = $this->sites;
$refresh = $this->refresh;
$page	 = $this->page;
$perPage = $this->perPage;
$codes	 = $this->codes;
$codec	 = $this->codec;
?>
<div class="content-head">
    <h3>
	Gestion <b><?php echo $title; ?></b> pour le site <a href="#" id="site" data-type="select"><?php echo ($refresh) ? $site->libelle : ''; ?></a>
	<img src='<?php echo $this->basePath() . '/img/rhx/refresh-16x16.png' ?>' title="Actualiser la liste" class='rhx-refresh'>
    </h3>
    <div class='toolbar'>
	<div class="toggle add" title="Ajouter">
            <a href="#" class='addTemplate' id='addTemplate' style="display: block; width: 100%; height: 100%;"></a>
        </div>
	<div>
	    <a href="#" class="btn btn-primary" id="btn-update">Mettre à jour les Plannings Type <i class="icon-white icon-upload"></i></a>
	</div>
    </div>
    <div id='addChoice'>
	<form action='<?php echo $this->url('RHX/default', array('controller' => 'template', 'action' => 'addNew')) ?>' id='new' method='post'>
	    <h4>Nouveau Planning Type</h4>
	    <div class='addTitle'>Pour le Site</div>
	    <div>
		<select id='new-site' name='site'>
		    <option value='-1'>Sélectionnez un Site</option>
		    <?php foreach ($sites as $s): ?>
    		    <option value='<?php echo $s->id; ?>' <?php echo ($site->id == $s->id) ? 'selected="selected"' : '' ?>><?php echo $s->libelle; ?></option>
		    <?php endforeach; ?>
		</select>
	    </div>
	    <div class='addTitle'>Options de Création</div>
	    <div class='addChoice vert-olive'>
		<a href='#' class='addLink' data-choice='1'>1 - Planning Type <b>Vide</b></a>
	    </div>
	    <div class='addChoice bleu'>
		<a href='#' class='addLink'  data-choice='2'>2 - Planning Type à partir des <b>Disponibilités</b></a>
	    </div>
	    <div class='addChoice beige choice3'>
		<a href='#' class='addLink'  data-choice='3'>3 - Planning Type à partir d'un autre <b>Planning Type</b></a>
	    </div>
	    <div class='addTitle'>Planning Type à Copier</div>
	    <div id='templateCopy'>
		<select name='copy'>
		    <option></option>
		</select>
	    </div>
	    <button class='btn btn-inverse fermer' style='float: right; margin-top: 5px;'>Fermer</button>
	    <button class='btn btn-success creer' style='display: none; float: right; margin-top: 5px; margin-right: 5px;'>Créer la Copie</button>
	    <input type='hidden' name='choice' id='data-choice' value='1'>
	</form>
    </div>
</div>

<div class="content-body">

    <!-- AJAX CONTENT -->
    <div id="content-data">
	<!-- AJAX LOADING -->
	<?php if (!$refresh): ?>
    	<div class="list-container site-container">
		<?php foreach ($sites as $s): ?>
		    <?php if ((int) $s->id == 0) continue; ?>
		    <div class="site-one">
			<a href="<?php echo $this->url('RHX/default', array('controller' => 'template', 'action' => 'index', 'id' => $s->id, 'other1' => 1, 'other2' => 1, 'other3' => 30)) ?>"><?php echo $s->libelle; ?></a>
		    </div>
		<?php endforeach; ?>
    	</div>
	<?php endif; ?>
    </div>
</div>

<form id="data" action="#" method="post">
    <input type="hidden" id="data-site" name="site" value="<?php echo $site->id; ?>">
</form>

<div id='update-parameter' class='modal hide fade'>
    <div class='modal-header informations'>
	<a href='#' class='close' data-dismiss='modal'>[x]</a>
	<h3><img src='<?php echo $this->basePath() . '/img/rhx/parameter-32x32.png' ?>' />&nbsp;Paramètres</h3>
    </div>
    <div class='modal-body' id='info-content' style='text-align: center;'>
	<form id="update-form" action="<?php echo $this->url('RHX/default', array('controller' => 'template', 'action' => 'updateTemplates')); ?>" method="post">
	    <label>
		<span>Date du planning semaine pour le site : </span>
		<input type="text" id="update-lastdate" name="lastdate" value="">
	    </label>
	    <label>
		<span>Date Limite : </span>
		<input type="text" id="update-limit" name="limit" value="">
	    </label>
	    <button type="submit" class="btn btn-info btn-small">Mettre à  jour</button>
	    <button type="button" class="btn btn-inverse btn-small">Annuler</button>
	</form>
    </div>
    <div class='modal-footer'>
	<a href='#' data-dismiss='modal' class='btn btn-info'>Fermer <i class='icon-white icon-eject'></i></a>
    </div>
</div>

<script type="text/javascript">
    // Démarrage
    $(function() {
	// Site Editable
	$('#site').editable({
	    title: 'Liste des Sites',
	    source: '<?php echo $this->url('RHX/default', array('controller' => 'employe', 'action' => 'jsonSiteList')) ?>',
	    validate: function(value) {
		$('#data-site').val(value);
		refresh();
		changeSite(value);
		// Changement de la zone de liste et chargement des templates associés
		changeSiteAndLoadTemplate(value);
	    }
	});
	// Lien de rafraichissement
	$('.rhx-refresh').click(function(e) {
	    e.preventDefault();
	    refresh();
	});
	// Lien d'ajout
	$('#addTemplate').click(function(e) {
	    e.preventDefault();
	    $('#addChoice').toggle('normal');
	});
	// Détecter clic en dehors du DIV
	$(document).mouseup(function(e) {
	    var container = $("#addChoice");
	    if (container.has(e.target).length === 0) { 			    // Masquage du DIV
		container.hide('normal');
	    }
	});
	// Select Element
	$('.addLink').click(function(e) {
	    e.preventDefault();
	    choice = $(this).attr('data-choice');
	    $('#data-choice').val(choice);
	    $('.selectChoice').removeClass('selectChoice');
	    $(this).parent().addClass('selectChoice');
	    if (choice === '3') {
		choice3();
	    } else {
		// Submit
		submitChoice();
	    }
	});
	$('#templateCopy').click(function(e) {
	    e.preventDefault();
	    $('#data-choice').val(3);
	    $('.selectChoice').removeClass('selectChoice');
	    $('.choice3').addClass('selectChoice');
	    choice3();
	});

	// Fermer
	$('.fermer').click(function(e) {
	    e.preventDefault();
	    $('#addChoice').hide('normal');
	});

	// Creer
	$('.creer').click(function(e) {
	    e.preventDefault();
	    submitChoice();
	});

	// Liste Planning Type
	$('#new-site').change(function() {
	    site = $(this).val();
	    ajax = $.ajax({
		type: 'post',
		url: '<?php echo $this->url('RHX/default', array('controller' => 'template', 'action' => 'templateList')); ?>',
		data: '&site=' + site
	    });
	    ajax.done(function(data) {
		$('#templateCopy').hide().html(data).fadeIn('normal');
	    });
	    ajax.fail(function() {
		alert("Erreur de chargement de la liste");
	    });
	});

	// Bouton de mise à jour des templates
	$('#btn-update').click(function(e) {
	    e.preventDefault();
	    updateAllPlanningType();
	});

	// Chargement des templates du site
	loadTemplate(<?php echo $site->id; ?>);

	// Rafraichissement
<?php if ($refresh): ?>
    	refresh();
<?php endif; ?>
    });

    // Click sur Copie
    function choice3() {
	$('.creer').show('normal');
    }

    // Submit
    function submitChoice() {
	// Test Site
	site = $('#new-site option:selected').val();
	if (site === '-1') {
	    alert("Veuillez choisir un site !");
	    return false;
	}

	// Test Planning Copie
	choice = $('#data-choice').val();
	if (choice === '3') {
	    copie = $('#templateCopy select option:selected').val();
	    if (copie === '') {
		alert("Veuillez choisir le Planning Type à Copier");
		return false;
	    }
	}

	// Submit Formulaire
	url = $('#new').attr('action');
	ajax = $.ajax({
	    type: 'post',
	    url: url,
	    data: $('#new').serialize()
	});
	ajax.done(function(data) {
	    fullScreenLayout();
	    $('#fullScreen').html(data).fadeIn('normal');
	});
	ajax.fail(function() {
	    alert("Erreur de Chargement");
	});
    }

    // Chargement et Rafraichissement
    function refresh() {
	data = $('#data').serialize();
	ajax = $.ajax({
	    type: 'post',
	    url: '<?php echo $this->url('RHX/default', array('controller' => 'template', 'action' => 'loadIndex')) ?>',
	    data: data
	});
	ajax.done(function(data) {
	    $('#content-data').hide().html(data).fadeIn('normal');
	});
	ajax.fail(function() {
	    $('#content-data').html("<div class='rh-error'>Contenu Impossible à charger</div>");
	});

	return false;
    }
    // Masquage et Affichage
    function fullScreenLayout() {
	// masquage
	$('.left-content').fadeOut('slow');
	$('.right-content').fadeOut('slow');
    }
    // Affichage et masquage
    function normalScreenLayout() {
	// Masquage
	$('#fullScreen').fadeOut('fast');
	// Affichage
	$('.left-content').fadeIn('fast');
	$('.right-content').fadeIn('fast');
    }
    function loadTemplate(siteId) {
	ajax = $.ajax({
	    type: 'post',
	    url: '<?php echo $this->url('RHX/default', array('controller' => 'template', 'action' => 'templateList')); ?>',
	    data: '&site=' + siteId
	});
	ajax.done(function(data) {
	    $('#templateCopy').hide().html(data).fadeIn('normal');
	});
	ajax.fail(function() {
	    alert("Erreur de chargement de la liste");
	});
    }
    function changeSiteAndLoadTemplate(siteId) {
	// Changer la sélection dans la zone de liste
	$('#new-site option:selected').removeProp('selected');
	$('#new-site option').each(function() {
	    if ($(this).val() === siteId) {
		$(this).prop('selected', 'selected');
		return false;
	    }
	});
	loadTemplate(siteId);
    }
    /**
     * Mise à jour de tous les plannings types
     */
    function updateAllPlanningType() {
	text = $('#btn-update').text();
	$('#btn-update').html("<img src='<?php echo $this->basePath() .'/img/rhx/ajax-waiting.gif' ?>'>");
	ajax = $.ajax({
	    type: 'post',
	    url: '<?php echo $this->url('RHX/default', array('controller' => 'template', 'action' => 'updatePlanningTemplate')) ?>'
	});
	ajax.done(function(){
	    refresh();
	    $('#btn-update').html(text);
	});
    }
</script>

<style type='text/css'>
    .content-head{
	position: relative;
    }
    #addChoice{
	display: none;
	position: absolute;
	top: 26px;
	right: 30px;
	background: #f8faf9;
	border: solid 1px #eeeeee;
	width: 500px;
	height: 320px;
	padding: 10px;
	border-radius: 10px 0px 10px 10px;
	box-shadow: 0px 0px 5px 0px #8d8d8d;
    }
    #addChoice h4{
	width: 100%;
	padding: 3px 0px;
	background: #009104;
	color: #ffffff;
	text-align: center;
	margin: 0px 0px 5px 0px;
    }
    #addChoice select{
	display: inline-block;
	width: 100%;
    }
    .addTitle{
	width: 100%;
	padding: 3px 0px;
	background: #f8fffa;
	text-align: center;
	margin: 5px auto;
	font-weight: bolder;
    }
    .addChoice{
	display: block;
	width: 100%;
	height: 2em;
	border: solid 1px #00b6f5;
	margin: 5px auto;
	line-height: 2em;
    }
    .addChoice a{
	display: block;
	width: 99%;
	height: 99%;
	margin: auto;
	text-align: center;
	color: #1f1f1f;
    }
    .addChoice a:hover{
	color: #ff0000;
    }
    .selectChoice{
	border: solid 2px #4a4a4a;
	color: #fff;
    }
</style>